﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Media Demo</title>
    <link href="../css/html5reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			body {
				background:#999;
			}
			
			.video-wrap {
				position:relative;
				margin:100px auto 10px auto;
				width:592px;
			}
			
		
			
		</style>
		</head>
	<body>
    <header>
<h1>HTML5 Media Demo</h1>
</header>

    <div class="video-wrap">
        <audio controls>
        <source src="demo-audio.ogg" />
        <source src="被遗弃者联盟 feat 初音（原金正日DEMO）.mp3" />
        </audio>
    </div>
	<div class="video-wrap">
		<video id="example" height="256" width="592" controls="true" autobuffer="true">
			<source src="demo2.mp4" type="video/mp4" />
			<source src="demo2.mp4" type="video/mp4" />
			<source src="demo2.ogv" type="video/ogg" />
			<p>Your browser does not support &lt;video&gt; tag</p>
		</video>
	</div>	
    
    <div class="video-wrap">
	
    <video width="320" height="240" preload="none" poster="videoframe.jpg">
        <source src="demo2.mp4" type="video/mp4" />
        <source src="demo-video.ogv" type="video/ogg" />
        </video>
        <script>
            var video = document.getElementsByTagName('video')[1];
            function toggleMute() {
                video.muted = !video.muted;
            }
        </script>
        <p>
        <a href="JavaScript:video.play();">Play</a> |
        <a href="JavaScript:video.pause();">Pause</a> |
        <a href="JavaScript:toggleMute();">Sound On/Off</a>
        </p>
    </div>	
		
	</body>
</html>